<template>
	<view>
		<navigation-custom title="竖屏壁纸"></navigation-custom>
		<scroll-view scroll-x class="uni-padding-wrap uni-common-mt" :scroll-left="scrollLeft">
			<uni-segmented-control :current="current" :values="tagItems" style-type="button" active-color="#32dbba"
				inActiveColor="#eeeeee" @clickItem="onClickItem" />
		</scroll-view>
		<view class="content">
			<view :class="direction === 0 ? 'imageBox h':'imageBox s'">
				<navigator v-if="imageList.length > 0" v-for="(item, index) in imageList" :key="index" url="">
					<image @click="goToPreview($event, index, imageList, 'image')" lazy-load :src="item.url"
						mode="aspectFill"></image>
				</navigator>
				<navigator v-if="videoList.length > 0" v-for="(item, index) in videoList" :key="index" url="">
					<video @click="goToPreview($event, index, videoList, 'video')" autoplay loop muted
						:controls='false' object-fit='cover' :src="item.video_url">
					</video>
				</navigator>
			</view>
			<uni-load-more :status="imageList.length === 0 || noData ? 'noMore' : 'more'"></uni-load-more>
			<view class="bottomBox"></view>
		</view>
		<float-bar :delBtnIsShow="false" :tabIsShowValue="300"></float-bar>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onUnload,
		onReachBottom,
		onPageScroll
	} from '@dcloudio/uni-app'

	import {
		computed,
		ref
	} from 'vue'
	import {
		unique,
		rpxToPx
	} from '@/utils/common.js'
	import goToPreview from '@/utils/goToPreview.js'
	import { setTabBarBadge } from '@/utils/client.js'

	// 方向
	const direction = ref(1)
	// 当前页数
	const page = ref(1)
	// 每页条数
	const pageCount = ref(8)
	// 滑条左侧距离
	const scrollLeft = ref(0)
	
	const cloudObj = uniCloud.importObject("wallpaper-client")
	
	const current = ref(0)
	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex
		}
		getData()
	}
	
	const tagItems = ref([])
	const tagObjItems = ref([])
	const getTag = async () => {
		const db = uniCloud.database();
		const collection = db.collection('category');
		const res = await collection.where("status == 1").orderBy("sort,desc").field("name").get()
		tagObjItems.value = res.result.data
		tagItems.value = res.result.data.map(item => {
			return item.name
		})
		// console.log(tagItems.value);
	}
	onLoad(async ()=>{
		// 请求数据
		await getTag()
		await getData()
	})

	onShow(async ()=>{
		setTabBarBadge()
		scrollLeft.value = current.value * await rpxToPx(155 + 20)
		if(tagObjItems.value.length == 0){
			// 请求数据
			await getTag()
		}
		// 当从更多跳转来时, 获取缓存categoryId
		const categoryId = uni.getStorageSync('categoryId')
		if(categoryId){
			// 查索引
			const index = tagObjItems.value.findIndex(item => {
				return item._id === categoryId
			})
			if(current.value !== index){
				current.value = index
				getData()
			}
		}
		// 清除缓存
		uni.removeStorageSync('categoryId')

		scrollLeft.value = current.value * await rpxToPx(155 + 20)
	})
	// 展示的列表
	const imageList = ref([])
	const videoList = ref([])
	const noData = ref(false)
	const getData = async (add = false) => {
		if(!add){
			// 不是追加就清空
			imageList.value = []
			noData.value = false
			page.value = 1
		}
		if (noData.value == true){
			 return
		}
		const res = await cloudObj.getSortList(tagObjItems.value[current.value]._id, direction.value, pageCount.value, page.value)
		if(res.length < 5){
			noData.value = true
		}
		if(!add){
			imageList.value = [...res]
		}else{
			imageList.value = [...imageList.value, ...res]
		}
	}
	

	// 下拉刷新
	onPullDownRefresh(async () => {
		try{
			await getData()
		}catch(e){
			//TODO handle the exception
		}finally{
			// 下拉刷新需要手动关闭
			uni.stopPullDownRefresh()
		}

	})
	// 加载更多
	onReachBottom(() => {
		page.value++
		getData(true)
	})
	
</script>

<style lang="scss" scoped>
	

	:deep() {
		.uni-common-mt {
			width: 100vw;
			height: 90rpx;
			// overflow-x: auto;
			position: fixed;
			z-index: 10;
			background-color:#fff;
		}
		.segmented-control {
			width: fit-content!important;

		}

		.segmented-control__item {
			width: 155rpx!important;
			border-radius: 50rpx!important;
			margin: 10rpx!important;
			border: none!important;
			padding-bottom: 5rpx!important;

		}
		.segmented-control__item--button{
			border: none!important;
			
		}
		.segmented-control {
			height: 100%!important;

		}
	}
	
	.fixedBox {
		background-color: $theme-bg-color2;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		position: fixed;
		right: 20rpx;
		bottom: 200rpx;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		z-index: 10;
		box-sizing: border-box;
		padding-bottom: 5rpx;
	}

	.bottomBox {
		width: 100%;
		height: 400rpx;
	}

	.s {
		display: grid;
		grid-template-columns: repeat(2, 1fr);

		// justify-items: center;
		navigator {
			// 332*514
			// width: 332rpx;
			height: 514rpx;
			padding: 10rpx;
			box-sizing: border-box;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.h {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		justify-items: center;

		navigator {
			padding: 5rpx 10rpx;
			box-sizing: border-box;
			width: 100%;
			height: 420rpx;

			image {
				height: 100%;
				width: 100%;
			}

			video {
				height: 100%;
				width: 100%;
			}
		}
	}

	.imageBox {
		width: 730rpx;
		margin: 0 auto;
		padding-top: 90rpx;
		
		navigator {
			// margin: 10rpx 0;
			overflow: hidden;

			image {
				border-radius: 15rpx;
			}

			video {
				width: 100%;
				border-radius: 15rpx;
			}
		}
	}
</style>